<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<style>
    .scroll_wrap{
        width: 200px;
        height: 400px;
        border: 1px solid #ccc;
        overflow: scroll;
    }
    .scroll_inner{
        width: 100px;
        height: 800px;
        border: 1px solid red;
        
    }
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <div class="box">
        <h1 v-cloak>{{info}}</h1>
        <!-- v-if后面可以跟布尔值 变量 表达式 -->
        <!-- v-if v-else -->
        <!-- <h1 v-if="show">{{answer1}}</h1>
        <h1 v-else>{{answer2}}</h1> -->
        <!-- <h1 v-if="count>6">{{answer1}}</h1>
        <h1 v-else>{{answer2}}</h1> -->
        <h1 v-if="count>6">{{answer1}}</h1>
        <h1 v-else-if="count>4">{{answer3}}</h1>
        <h1 v-else>{{answer2}}</h1>


        <!-- v-show -->
        <h1>{{msg}}</h1>    
        <h1 v-show="count>4">{{ans}}</h1>
        <h1 v-show="false">{{answ}}</h1>

        <!-- 
            v-if v-show 条件判断
            区别？
            1.v-show 是display:none/block 属性切换  节省性能
            v-if v-else 真正的销毁与重建 相较之下消耗性能
            2. v-if可以与v-else 和v-else-if搭档使用，判断条件可有多种
            v-show 没有 只有两种
            3.首次渲染v-if消耗性能少  v-show消耗的性能大



         -->
    </div>
    
    <script>
        /* 
        你有100万吗？
        有
        没有
        你猜
        
        
        */
        const vm = new Vue({
            el:'.box',
            data:{
                info:'你有100万吗？',
                answer1:'有',
                answer2:'没有',
                answer3:'你猜',
                show:true,
                count:5,
                msg:'你嫁给我吧？',
                ans:'你是个好人！！',
                answ:'羞答答的说嗯嗯'
            }
        })
    </script>
</body>
</html>